<!--  -->
<template>
  <a-modal
    width="80%"
    title="编辑研究团队"
    :visible="updateResearchGroupVisible"
    :footer="null"
    @cancel="handleCancel(0)"
  >
    <!-- 添加研究团队 -->
    <s-table :columns="$auth('PROJECT.PROJECT_RESEARCH_MEMBER_LIST') ? columns:[]" bordered :data="loadData" :row-key="record => record.id" ref="memberTableRef">
      <template slot="title">
        <div style="display: flex;justify-content:space-between;}">
          <span class="title">研究团队</span>
          <a-button type="primary" icon="plus" v-if="!isHidden && $auth('PROJECT.PROJECT_RESEARCH_ADD_MEMBER')" @click="clickAddGroup()">添加</a-button>
        </div>
      </template>
      <template slot="phone" slot-scope="text, record">
        {{ record.phone | formatPhone() }}
      </template>
      <template slot="email" slot-scope="text, record">
        {{ record.email | formatEmail() }}
      </template>
      <template slot="authStatus" slot-scope="text, record">
        {{ record.authStatus | enumValueByKey($const.CENTER_MEMBER_STATUS) }}
      </template>
      <template slot="operate" slot-scope="text, record">
        <a v-if="!$auth('PROJECT.PROJECT_RESEARCH_MEMBER_EDIT') && $auth('PROJECT.PROJECT_RESEARCH_MEMBER_INFO_DETAIL')" @click="clickView(record)" style="margin-right: 10px">查看</a>
        <a v-if="$auth('PROJECT.PROJECT_RESEARCH_MEMBER_EDIT')" @click="clickView(record)" style="margin-right: 10px">编辑</a>
        <a-popconfirm title="是否确认取消邀请？" @confirm="clickCancel(record)">
          <!-- 4 是待处理 为4时可以取消 其余状态只能删除-->
          <a v-if="record.authStatus == 4 && $auth('PROJECT.PROJECT_RESEARCH_MEMBER_EDIT')" style="margin-right: 10px">取消</a>
        </a-popconfirm>
        <a-popconfirm title="确定重新邀请？" @confirm="clickReinvite(record)">
          <a v-if="(record.authStatus === 2 || record.authStatus === 4) && $auth('PROJECT.PROJECT_RESEARCH_MEMBER_EDIT')">重新邀请</a>
        </a-popconfirm>
        <a-popconfirm title="是否确认删除？" @confirm="clickRemove(record)">
          <a style="margin-left: 10px" v-if="record.authStatus != 4 && record.authStatus != 1 && $auth('PROJECT.PROJECT_RESEARCH_MEMBER_EDIT')">删除</a>
        </a-popconfirm>
      </template>
    </s-table>
    <!-- 查看团队成员信息弹框 -->
    <ViewCenterMemberModal
      ref="viewCenterMemberRef"
      :viewCenterModalVisible="viewCenterModalVisible"
      :viewCenterMemberDetail="viewCenterMemberDetail"
      :hospitalNameProp="mainInfo.orgName"
      @closeViewCenterModal="closeViewCenterModal" />

    <!-- 团队成员新增弹框 -->
    <AddMemberModal
      ref="addMemberRef"
      :researchId="centerId"
      :modalVisible="modalVisible"
      :hospitalNameProp="mainInfo.orgName"
      :departmentListProp="departmentListProp"
      @closeModal="closeModal" />
  </a-modal>
</template>

<script>
import monitor from '@/utils/monitor'
import updateCenterModal from '@/monitor/views/overview/detail/responsible/components/members/updateCenterModal.js'

import { getCenterDetail, deleteCenterMember, reinviteCenterMember } from '@/api/overview/member'
// import { getCenterDetail, deleteCenterMember, addCenterMember } from '@/api/overview/member'
// import { deleteCenterMember, centerMemberList } from '@/api/overview/member'
import ViewCenterMemberModal from './ViewCenterMemberModal'
import AddMemberModal from './AddMemberModal'
// import { nextTick } from 'vue/types/umd'
import { buildPaginationObj } from '@/components/Table'
const watch = monitor(updateCenterModal)

const columnLitter = [
  {
    title: '编号',
    key: 'researchNo',
    dataIndex: 'researchNo'
  },
  {
    title: '姓名',
    key: 'name',
    dataIndex: 'name'
  },
  {
    title: '角色',
    key: 'position',
    dataIndex: 'position'
  },
  {
    title: '电话/手机',
    key: 'phone',
    dataIndex: 'phone'
  },
  {
    title: '邮件地址',
    key: 'email',
    dataIndex: 'email'
  },
  {
    title: '邀请状态',
    key: 'authStatus',
    dataIndex: 'authStatus',
    scopedSlots: { customRender: 'authStatus' }
  }
]
const columnsMore = [
  {
    title: '编号',
    key: 'researchNo',
    dataIndex: 'researchNo'
  },
  {
    title: '姓名',
    key: 'name',
    dataIndex: 'name'
  },
  {
    title: '角色',
    key: 'roleName',
    dataIndex: 'roleName'
  },
  {
    title: '电话/手机',
    key: 'phone',
    dataIndex: 'phone',
    scopedSlots: { customRender: 'phone' }
  },
  {
    title: '邮件地址',
    key: 'email',
    dataIndex: 'email',
    scopedSlots: { customRender: 'email' }
  },
  {
    title: '邀请状态',
    key: 'authStatus',
    dataIndex: 'authStatus',
    scopedSlots: { customRender: 'authStatus' }
  },
  {
    title: '操作',
    key: 'operate',
    scopedSlots: { customRender: 'operate' }
  }
]
export default {
  name: '',
  props: {
    updateResearchGroupVisible: {
      type: Boolean,
      default: false
    }
  },
  components: {
    ViewCenterMemberModal,
    AddMemberModal
  },
  data () {
    return {
      mainInfo: {},
      centerId: '',
      columns: columnsMore,
      modalVisible: false,
      viewCenterModalVisible: false,
      viewCenterMemberDetail: {},
      hospitalNameProp: null,
      departmentListProp: [],
      loadData: parameter => {
        if (this.$auth('PROJECT.PROJECT_RESEARCH_MEMBER_LIST')) {
          return getCenterDetail({ resId: this.centerId }).then(res => {
            // return centerMemberList({ resId: this.mainInfo.orgId }).then(res => {
            this.mainInfo = res
            return res.detailsList
          })
        } else {
          return Promise.resolve(buildPaginationObj([]))
        }
      },
      isHidden: false
    }
  },
  created () {
  },
  methods: watch({
    toggleColumns () {
      this.columns = this.isHidden ? columnsMore : columnLitter
    },
    // 对话框关闭
    handleCancel (val) {
      this.$emit('closeResearchGroup', val)
    },
    // 点击查看详情
    clickView (record) {
      console.log(record, '*************************')
      this.viewCenterModalVisible = true
      this.viewCenterMemberDetail = record
      this.$refs.viewCenterMemberRef.getCenterDetail(record.researchId)
    },
    // 关闭查看成员信息对话框
    closeViewCenterModal (val) {
      this.viewCenterModalVisible = false
      if (val) {
        this.$refs.memberTableRef.refresh(true)
      }
    },
    // 点击添加成员显示添加对话框
    clickAddGroup () {
      this.modalVisible = true
      if (this.mainInfo.orgDeptId) {
        this.departmentListProp = this.filterDepartment()
      }
    },
    // 提取科室 新增研究中心成员时将所选的科室传给子组件
    filterDepartment () {
      const newArr = []
      const idArr = this.mainInfo.orgDeptId.split(',')
      const nameArr = this.mainInfo.orgDeptName.split(',')
      for (let i = 0; i < idArr.length; i++) {
        const obj = {}
        obj.id = idArr[i]
        obj.name = nameArr[i]
        newArr.push(obj)
      }
      return newArr
    },
    // 对话框关闭 根据val判断是取消还是发送了邀请
    closeModal (val) {
      if (val) {
        this.$refs.memberTableRef.refresh(true)
      }
      this.modalVisible = false
    },
    // 点击重新邀请
    clickReinvite (record) {
      console.log(record, '当前行')
      // const { researchNo, name, phone, email, orgDeptId, position, mainResearch, roleId, isCheck, researchId, authStatus } = { ...record }
      // const invitationData = { researchNo, name, phone, email, orgDeptId, position, mainResearch, roleId, isCheck, researchId, status: authStatus }
      // addCenterMember({ ...invitationData })
      //   .then(res => {
      //     this.$message.success('重新邀请成功')
      //     this.$refs.memberTableRef.refresh(true)
      //   })
      //   .catch(() => {})
      reinviteCenterMember({ proId: this.$route.query.id, researchNo: record.researchNo, id: record.id, status: record.authStatus })
        .then(res => {
          this.$message.success('重新邀请成功')
          this.$refs.memberTableRef.refresh(true)
        })
        .catch(() => {})
    },
    // 点击取消
    clickCancel (record) {
      console.log('点击了取消')
      deleteCenterMember({ id: record.id })
        .then(res => {
          console.log(res)
          this.$refs.memberTableRef.refresh(true)
        })
        .catch(() => {})
    },
    // 点击移出
    clickRemove (record) {
      console.log('点击了移出')
      deleteCenterMember({ id: record.id })
        .then(res => {
          console.log(res)
          this.$refs.memberTableRef.refresh(true)
        })
        .catch(() => {})
    },
    reloadData (val) {
      this.centerId = val
      this.$nextTick(() => {
        this.$refs.memberTableRef.refresh(true)
      })
    }
  })
}
</script>
<style scoped lang="less">
.title {
  line-height: 32px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: bold;
  font-size: 16px;
}
</style>
